
<template>
  <div style="padding: 5px">
    <el-row >
      <el-col :span="4"><el-form-item label="是否必填"></el-form-item></el-col>
      <el-col :span="20">
        <el-radio-group v-model="data.radio">
          <el-radio-button label="1" value="1" border>是</el-radio-button>
          <el-radio-button label="2" value="2" border>否</el-radio-button>
        </el-radio-group>
      </el-col>
      <el-col :span="4"  v-if="data.radio==='2'"><el-form-item label="描述"></el-form-item></el-col>
      <el-col :span="20" v-if="data.radio==='2'">
        <el-input
            v-model="data.value"
            style="width: 240px"
            :rows="2"
            type="textarea"
            placeholder="Please input"
        />
      </el-col>
      <el-col :span="4"  v-if="data.radio==='2'"><el-form-item label="上传图片"></el-form-item></el-col>
      <el-col :span="20" v-if="data.radio==='2'">
        <el-upload
            v-model:file-list="data.file"
            :action="props.fileUploadUrl"
            list-type="picture-card"
            :on-preview="handlePictureCardPreview"
            :on-remove="handleRemove"
        >
          <el-icon><Plus /></el-icon>
        </el-upload>
      </el-col>
    </el-row>
    <el-dialog v-model="dialogVisible">
      <img w-full :src="dialogImageUrl" alt="Preview Image" />
    </el-dialog>
  </div>
</template>

<script lang="ts" setup>
import { defineProps, ref } from 'vue'
import {UploadProps} from "element-plus";
const props = defineProps({
  componentSchema: {
    default: () => ({}),
    type: Object,
  },
  modelValue: {
    default: () => ({}),
    type: Object,
  },
});
const data = ref({
  radio: '2' ,
  value: '示例数据2',
  file: [ {
      name: 'food.jpeg',
      url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100',
    },{
      name: 'plant-1.png',
      url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100',
      }
  ]
})
const dialogImageUrl = ref('')
const dialogVisible = ref(false)

const handleRemove: UploadProps['onRemove'] = (uploadFile, uploadFiles) => {
  console.log(uploadFile, uploadFiles)
}

const handlePictureCardPreview: UploadProps['onPreview'] = (uploadFile) => {
  dialogImageUrl.value = uploadFile.url!
  dialogVisible.value = true
}
</script>